<template>
  <div>
    <div class="box">
      <h1>本轮成绩</h1>
      <p>90分</p>
      <div class="btn">
        <a href="">领取礼包</a>
        <div></div>
        <a href="">查看排名</a>
      </div>
    </div>
    <div class="box1">
      <div class="box2">
        <h1>3分23秒</h1>
        <p>本轮用时</p>
      </div>
      <div class="line"></div>
      <div class="box2">
        <h1>50%</h1>
        <p>获奖几率</p>
      </div>
      <div class="line"></div>
      <div class="box2">
        <h1>90</h1>
        <p>获得积分</p>
      </div>
    </div>
    <div class="box3">
      <div class="scj"></div>
      <div class="fx"></div>
    </div>
    <div class="box4">
      <h1>距离第二轮答题还有</h1>
      <h2>168小时48分59秒</h2>
      <a href="">开始答题</a>
     <!--  <h1>恭喜您完成本次答题</h1>
      <img src="/static/questions/img/dtwb.png">-->
      <p>1、分享本次活动可获得<span>1次</span>答题机会<br>2、获奖名单将在<span>11月10号</span>公布</p>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    components: {},
    data() {
      return {}
    },
    created() {

    },
    methods:{

    }
  }
</script>

<style scoped>
  .box{
    position: relative;
    height: 8rem;
    background: -webkit-linear-gradient(164deg,rgba(248,108,108,1) 0%,rgba(255,69,135,1) 100%);
    background: -o-linear-gradient(164deg,rgba(248,108,108,1) 0%,rgba(255,69,135,1) 100%);
    background: -moz-linear-gradient(164deg,rgba(248,108,108,1) 0%,rgba(255,69,135,1) 100%);
    background: linear-gradient(164deg,rgba(248,108,108,1) 0%,rgba(255,69,135,1) 100%);
    color: #fff;
    text-align: center;
  }
  .box h1{
    font-size: 14px;
    line-height: 1rem;
    padding: 0.75rem 0;
  }
  .box p{
    font-size: 36px;
    line-height: 2.5rem;
  }
  .btn{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2rem;
    background-color: rgba(255, 255, 255, 0.2);
    display: flex;
    flex-wrap: nowrap;
  }
  .btn a{
    display: block;
    width: 50%;
    line-height: 2rem;
    font-size: 14px;
    color: #fff;
  }
  .btn div{
    width: 1px;
    height: 1rem;
    margin-top: 0.5rem;
    background-color: #FFA8C7;
  }
  .box1{
    display: flex;
    flex-wrap: nowrap;
    height: 3.85rem;
  }
  .box2{
    width: 33%;
    text-align: center
  }
  .box2 h1{
    font-size: 17px;
    line-height: 1.2rem;
    padding: 0.75rem 0 0.4rem;
    color: #FF4587;
  }
  .box2 p{
    font-size: 13px;
    line-height: 0.9rem;
  }
  .line{
    width: 1px;
    height: 2rem;
    background-color: #ddd;
    margin-top: 1rem;
  }
  .box3{
    padding: 0.75rem 0 0.5rem;
    border-top: 0.5rem solid #EFEFEF;
    border-bottom: 0.5rem solid #EFEFEF;
    text-align: center;
  }
  .scj{
    display: inline-block;
    width: 6.85rem;
    height: 2.2rem;
    background:url("../../../static/questions/img/scj.png") no-repeat center;
    background-size: 100%;
    margin-right: 8%;
  }
  .fx{
    display: inline-block;
    width: 6.85rem;
    height: 2.2rem;
    background:url("../../../static/questions/img/fxhd.png") no-repeat center;
    background-size: 100%;
  }
  .box4{
    text-align: center;
  }
  .box4 h1{
    font-size: 15px;
    line-height: 1.05rem;
    margin: 0.75rem 0 0.6rem;
  }
  .box4 h2{
    font-size: 18px;
    color: #FF4587;
    margin-bottom: 1rem;
    font-weight: bold;
  }
  .box4 a{
    display: block;
    width: 89.33%;
    height: 2.2rem;
    line-height: 2.2rem;
    background-color: #FF4587;
    border-radius: 1.1rem;
    font-size: 18px;
    text-align: center;
    color: #fff;
    border:0;
    margin: 0 auto;
  }
  .box4 .wks{
    background-color: #FFC5DA;
  }
  .box4 .btn1{
    margin-top: 1rem;
    box-sizing: border-box;
    border: 1px solid #FF4587;
    color: #FF4587;
    background-color: #fff;
  }
  .box4 p{
    width: 89.33%;
    margin: 0.75rem auto;
    text-align: left;
    font-size: 13px;
    color: #858585;
    line-height: 1.2rem
  }
  .box4 p span{
    color: #FF4587;
  }
  .box4 img{
    display: block;
    width: 100%;
    margin-bottom: 2rem;
  }
  .fxhd,.sc{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    z-index: 9999999;
  }
  .fxhd img,.sc img{
    display: block;
    width: 100%;
  }


</style>
